<!--送货计划列表-->
<template>
	<div class="m-view-unPublishedPurOrder m-window">
		<div class="m-condition" v-if="!detailsShow">
			<el-row :gutter="10">
				<el-col :span="2" style="float:right">
					<el-button @click="openSize" class="spreadBtn">
						<i class="iconfont" :class="!isSpread?'icon-zhankai':'icon-shouqi1'"></i>
						<span>{{!isSpread?'展开':'收起'}}</span>
					</el-button>
				</el-col>
				<el-col :span="2" v-if="isPlanSupplier&&!isTransport" class="m-floatRight">
					<el-button type="primary" @click="editPlan">编辑</el-button>
				</el-col>
				<el-col :span="2" v-if="isPlanSupplier&&!isTransport" class="m-floatRight">
					<el-button type="primary" @click="addPlan">新建</el-button>
				</el-col>
				<el-col :span="2" class="m-floatRight">
					<el-button type="primary" @click="browseDetail">查看</el-button>
				</el-col>
				<el-col :span="2" class="m-floatRight">
					<el-button type="primary" @click="searchPlans(1)">查询</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-form
					:model="ruleForm"
					ref="ruleForm"
					label-width="70px"
					:inline-message="true"
					label-position="left"
				>
					<el-col :span="6">
						<el-form-item label="客户" class="rightItem">
							<el-select
								value-key="id"
								v-model="ruleForm.companyInfo"
								placeholder="请选择客户"
								@change="companyChange"
								clearable
								ref="content"
								filterable
							>
								<el-option
									v-for="item in comOptions"
									:key="item.id"
									:label="item.companyName"
									:value="item"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="需求日期" class="rightItem">
							<el-date-picker
								v-model="ruleForm.planSd"
								type="date"
								placeholder="开始日期"
								value-format="yyyy-MM-dd"
								:editable="false"
								clearable
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-date-picker
							v-model="ruleForm.planEd"
							type="date"
							placeholder="结束日期"
							value-format="yyyy-MM-dd"
							:editable="false"
							clearable
						></el-date-picker>
					</el-col>
					<el-col :span="5">
						<el-form-item label="发布日期" class="rightItem">
							<el-date-picker
								v-model="ruleForm.releaseSd"
								type="date"
								placeholder="开始日期"
								value-format="yyyy-MM-dd"
								:editable="false"
								clearable
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-date-picker
							v-model="ruleForm.releaseEd"
							type="date"
							placeholder="结束日期"
							value-format="yyyy-MM-dd"
							:editable="false"
							clearable
						></el-date-picker>
					</el-col>
				</el-form>
			</el-row>
			<el-row :gutter="10">
				<el-form :model="ruleForm" label-width="70px" :inline-message="true" label-position="left">
					<el-col :span="6">
						<el-form-item label="计划单号" class="rightItem">
							<el-input v-model="ruleForm.planNo" placeholder="请输入计划单号" clearable maxlength="15"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5" v-if="!isTransport">
						<el-form-item label="状态" class="rightItem">
							<el-select value-key="id" v-model="ruleForm.billState" placeholder="请选择状态" clearable>
								<el-option
									v-for="item in stateOptions"
									:key="item.value"
									:label="item.name"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="计划方" class="rightItem">
							<el-select
								value-key="id"
								v-model="ruleForm.type"
								@change="planTypeChange"
								placeholder="请选择计划方"
								clearable
								:disabled="isTransport"
							>
								<el-option
									v-for="item in [{type:1,label:'供方'},{type:0,label:'采购方'}]"
									:key="item.type"
									:label="item.label"
									:value="item.type"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="发布人" class="rightItem">
							<el-input v-model="ruleForm.releaser" placeholder="请输入发布人" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
		</div>
		<!-- ag-table -->
		<div
			class="m-agTable m-bottom m-top2"
			v-if="!detailsShow"
			:style="{top:isSpread?'150px':'100px'}"
		>
			<ag-grid-vue
				class="m-agTableContent ag-theme-balham"
				:gridOptions="gridOptions"
				:columnDefs="columnDefs"
				v-loading="loading"
				rowSelection="multiple"
			></ag-grid-vue>
		</div>
		<!-- 分页组件 -->
		<div class="m-page" v-if="!detailsShow">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				@prev-click="handlePrevClick"
				@next-click="handleNextClick"
				:current-page="pageInfo.current"
				:page-sizes="[30,50,100,150,200]"
				:page-size="pageInfo.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageInfo.total"
			></el-pagination>
		</div>
		<!-- 计划详情组件 -->
		<div class="m-window" v-if="detailsShow">
			<deliveryPlanDetail
				@cancelComponents="cancelComponents"
				:tabelData="planDetailData"
				:editModel="pageLayOut"
			></deliveryPlanDetail>
		</div>
	</div>
</template>

<script>
import _Api from "@/api";
import localeText from "@/i18n/agGridText";
import authInfo from "@/public/authInfo.js";
import Msg from "@/public/message.js"
import deliveryPlanDetail from "@/views/purchase/createDeliveryPlan";
import constant from "@/public/constant";
import gridOptions from 'lesso-common/public/gridOptions';
export default {
	data () {
		return {
			srmSupplierDialogVisible: false,
			detailsShow: false,
			ruleForm: {
				companyInfo: '',//公司代码
				billState: 1,//状态
				planNo: '',//计划单号
				planSd: '',//需求开始日期
				planEd: '',//需求结束日期
				releaseSd: '',//发布开始日期
				releaseEd: '',//发布结束日期
				releaser: '',//发布人
				type: 0
			},
			pageInfo: {
				current: 1,//当前页
				size: 30,//每页显示条数
				total: 0//总条数
			},
			pageLayOut: '',
			selCusCode: '',
			comOptions: [],
			supplierInfo: [],
			loading: false,
			layout: {},
			inputClearBut: false,
			gridOptions: {},
			// 搜索状态下拉框内容 
			stateOptions: [
				{ value: 0, name: '待发布' },
				{ value: 1, name: '待供方确认' },
				{ value: 2, name: '待购方确认' },
				{ value: 3, name: '全部确认' }
			],
			columnDefs: [],
			rowData: [],
			getClickValue: {},
			planDetailData: [],
			isPlanSupplier: false,
			isTransport: this.$global.isTransport,
			transport: null,
			isSpread: false,
		};
	},
	beforeMount () {
		this.gridOptions = Object.assign({
			context: {
				componentParent: this
			},
			localeText: localeText,
			suppressRowClickSelection: true,
			enableColResize: true,
			// getContextMenuItems:this.getContextMenuItems,
			onGridReady: function ($event) {
				// that.gridOptions.api.sizeColumnsToFit();
			}
		}, gridOptions())
		this.columnDefs = [
			{ headerName: "计划单号", field: "planNo", width: 180, checkboxSelection: true },
			{
				headerName: "计划区间",
				field: "planSDate",
				width: 160,
				cellRenderer: function (params) {
					if (params.value) {
						let nodeData = params.data
						let startDate = new Date(Date.parse(params.value.replace(/-/g, "/"))).Format("yyyy.MM.dd");
						let endDate = new Date(Date.parse(nodeData.planEDate.replace(/-/g, "/"))).Format("yyyy.MM.dd");
						return `${startDate}~${endDate}`
					}
				}
			},
			{
				headerName: "供应商",
				field: "supplierCode",
				width: 180,
				cellRenderer: function (params) {
					if (Array.isArray(params.data.deliveryplanmxs) && params.data.deliveryplanmxs.length > 0) {
						const { supplierCode, supplierName } = params.data.deliveryplanmxs[0]
						return '<span class="ag-icon">' + '(' + supplierCode + ')' + supplierName + '</span>'
					}
				},
				tooltipField: 'supplierName'
			},
			{
				headerName: "工厂",
				field: "companyCode",
				width: 180,
				cellRenderer: function (params) {
					if (Array.isArray(params.data.deliveryplanmxs) && params.data.deliveryplanmxs.length > 0) {
						const { companyCode, companyName } = params.data.deliveryplanmxs[0]
						return '<span class="ag-icon">' + '(' + companyCode + ')' + companyName + '</span>'
					}
				},
				tooltipField: 'companyName'
			},
			{
				headerName: "运输方",
				field: "transport",
				width: 180,
				hide: true,
				tooltipField: 'transport'
			},
			{ headerName: "发布人", field: "releaser", width: 100, tooltipField: 'releaser' },
			{
				headerName: "发布日期",
				field: "releaseDate",
				width: 120,
				cellRenderer: function (params) {
					if (params.value)
						return new Date(Date.parse(params.value.replace(/-/g, "/"))).Format("yyyy-MM-dd");
				}
			},
			{
				headerName: "状态",
				field: "billState",
				width: 90,
				cellRenderer: function (params) {
					if (params.value == "0")
						return '<span class="ag-icon">待发布</span>';
					else if (params.value == "1")
						return '<span class="ag-icon">待供方确认</span>';
					else if (params.value == "2")
						return '<span class="ag-icon">待购方确认</span>';
					else if (params.value == "3")
						return '<span class="ag-icon">全部确认</span>';
				}
			}
		]
	},
	mounted () {
		this.gridOptions.api.hideOverlay();
		this.selCusCode = constant.supplierData ? constant.supplierData.supplierCode : ''
		if (this.isTransport) {
			this.ruleForm.type = 1
			this.stateOptions = [
				{ value: 0, name: '待发布' },
				{ value: 3, name: '全部确认' }
			]
			this.ruleForm.billState = 3
			this.gridOptions.columnApi.setColumnVisible('transport', true)
		}
		// 获取公司内容
		authInfo.getAuthInfo().then((authInfo) => {
			this.comOptions = authInfo
			this.ruleForm.companyInfo = this.comOptions[0]
			this.searchPlans(1)
		})
		this.judgeSupplierIsplan()
	},
	methods: {
		//   展开搜索条件
		openSize () {
			this.isSpread = !this.isSpread
		},
		// 送货计划发起方改变回调
		planTypeChange (val) {
			if (val === 0) {
				// 采购方
				this.stateOptions = [
					{ value: 0, name: '待发布' },
					{ value: 1, name: '待供方确认' },
					{ value: 2, name: '待购方确认' },
					{ value: 3, name: '全部确认' }
				]
				this.gridOptions.columnApi.setColumnVisible('transport', false)
				this.searchPlans(1)
			} else if (val === 1) {
				// 供方
				this.stateOptions = [
					{ value: 0, name: '待发布' },
					{ value: 3, name: '全部确认' }
				]
				this.ruleForm.billState = 0
				this.gridOptions.columnApi.setColumnVisible('transport', true)
				this.searchPlans(1)
			}
		},
		// 选择公司名称回调
		companyChange (params) {
			console.log(params)
		},
		/* 分页器事件集合开始 */
		handleSizeChange (val) {
			this.pageInfo.size = val
			this.pageInfo.current = 1
			this.searchPlans()
		},
		handleCurrentChange (val) {
			this.pageInfo.current = val
			this.searchPlans()
		},
		handlePrevClick (val) {
			this.pageInfo.current = val
		},
		handleNextClick (val) {
			this.pageInfo.current = val
		},
		/* 分页器事件集合 结束 */
		// 判断供应商是否有计划配置
		judgeSupplierIsplan () {
			this.$http.judgeSupplierIsplan({ supplierCode: this.selCusCode }).then(({ data }) => {
				if (data.code == 1) {
					this.isPlanSupplier = true
				} else {
					this.isPlanSupplier = false
				}
			}).catch(err => {
				Msg.showErrorMsg(err.data.message);
			})
		},
		// 查询送货计划列表数据
		searchPlans (flag) {
			if (flag) this.pageInfo.current = 1
			const { companyInfo, releaser, planSd, planEd, billState, planNo, releaseSd, releaseEd, type } = this.ruleForm
			const { size, current } = this.pageInfo
			if (!companyInfo) {
				this.$alert("提示：请选择公司", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				});
				return;
			}
			this.loading = true
			let params = {
				companyCode: companyInfo.companyCode,
				supplierCode: '',
				planNo: planNo,
				releaser: releaser,
				planSd: planSd,
				planEd: planEd ? `${planEd} 23:59:59` : '',
				releaseSd: releaseSd,
				releaseEd: releaseEd ? `${releaseEd} 23:59:59` : '',
				billState: billState,
				current: current,
				size: size,
				type: type
			}
			if (this.selCusCode) params.supplierCode = this.selCusCode //供应商编码
			if (this.isTransport) params.transport = this.$global.transport.transportName
			_Api.getDeliveryListData(params).then((res) => {
				let data = res.data
				this.loading = false
				if (data.code == 1) {
					this.rowData = res.data.rows
					this.gridOptions.api.setRowData(this.rowData)
					//   this.gridOptions.columnApi.resetColumnState()
					this.pageInfo.total = data.total
				} else {
					Msg.showErrorMsg(data.info);
				}
			})
				.catch(err => {
					Msg.showErrorMsg(err.data.message);
				})

		},
		// 查看计划详情
		browseDetail () {
			let rows = this.gridOptions.api.getSelectedRows();
			if (rows.length <= 0) {
				this.$alert("提示：请选择一条你想要查看的数据", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				});
				return;
			} else if (rows.length > 1) {
				this.$alert("提示：每次只能查看一条数据！", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				});
				return;
			}
			this.pageLayOut = "view"
			this.loadDeliveryPlanDetail(rows[0].id)
		},
		// 编辑计划
		editPlan () {
			let rows = this.gridOptions.api.getSelectedRows();
			if (rows.length <= 0) {
				this.$alert("提示：请选择一条你想要编辑的数据", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				});
				return;
			} else if (rows.length > 1) {
				this.$alert("提示：每次只能编辑一条数据！", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				});
				return;
			}
			if (rows[0].billState > 3) {
				this.$alert("提示：已发布不能编辑！", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				});
				return;
			}

			this.pageLayOut = "edit"
			this.loadDeliveryPlanDetail(rows[0].id)
		},
		addPlan () {
			this.planDetailData[0] = {
			}
			this.pageLayOut = 'create';
			this.detailsShow = true;
		},
		// 调接口获取计划单详情数据
		loadDeliveryPlanDetail (planId) {
			this.loading = true
			this.$http.getDeliveryPlanDetail({ id: planId }).then(({ data }) => {
				this.loading = false
				if (data.code == 1) {
					console.log('明细数据', data.rows)
					this.planDetailData[0] = data.rows
					this.detailsShow = true
				} else {
					Msg.showErrorMsg(data.info)
				}
			}).catch(err => {
				this.loading = false
				Msg.showErrorMsg(err.data.message)
			})
		},
		// 返回回调
		cancelComponents (msg) {
			if (msg) {
				let that = this;
				this.detailsShow = false
				this.$nextTick(_ => {
					that.searchPlans(1);
				})
			}
		},
	},
	components: {
		deliveryPlanDetail,
	}
};
</script>

<style>
</style>